<template>
    <view class="page">
        <view class="login-page" v-if="!loginSuccess">
            <view class="login-header">
                <view class="login-header-title">注册/登录</view>
                <view class="login-header-content" v-if="userPhone==''"></view>
                <view class="login-header-content" v-if="userPhone.length>0">{{userPhone.substring(0,3)+'****'+userPhone.substring(7,11)}}</view>
            </view>
            <view class="login-btn-list">
<!--                <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="userPhone==''">一键获取绑定手机号</button>-->
                <button class="login-btn" @click="phoneChange" v-if="radioChecked==0">手机号码一键绑定</button>
                <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="radioChecked==1">手机号码一键绑定</button>
                <button class="return-btn" @click="returnBack">返回</button>
            </view>
            <view class="login-footer" v-if="userAgreement!=0">
                <radio color="#3981FF" size="16" class="radio" @click="radioChange" :checked="radioChecked"></radio>
                <text @click="skipUserAgreement">同意《运营商一键登录服务协议》</text>
            </view>
        </view>
        <view class="login-success" v-if="loginSuccess">
            <view class="login-icon">
                <img :src="File_Url+'login-success.png'" />
            </view>
            <view class="login-content">
                <text class="success-phone">{{userPhone.substring(0,3)+'****'+userPhone.substring(7,11)}}</text>
                <text class="success-message">登录成功</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "login",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                radioChecked: 1,
                userPhone: '',
                loginSuccess: false,
                userToken: '',
                userAgreement:''

            }
        },
        onLoad(query){
            // this.wxLogin();
            this.userPhone = query.phone;
            this.getUserAgreement();
        },
        methods:{
            phoneChange(){
                uni.showToast({
                    icon: 'none',
                    title: "未同意《运营商一键登录服务协议》",
                    duration: 1500
                })
            },
            //获取微信绑定的手机号
            async getPhoneNumber (e) {
                if (e.detail.errMsg != 'getPhoneNumber:fail user deny'&&this.radioChecked==1) {
                    var _this = this;
                    uni.login({
                        success: async res =>{
                            // 获取code
                            let code = res.code;
                            let params = {
                                user_token: uni.getStorageSync('userToken'),
                                code: code,
                                encryptedData: e.detail.encryptedData,
                                iv: e.detail.iv
                            }
                            const res1 = await this.$api.getWeChatPhone(params);
                            if (res1.data.level == 'success'){
                                _this.directBindingPhone(res1.data.data)
                            }
                        }
                    });
                }else {
                    uni.showToast({
                        icon: 'none',
                        title: "未同意《运营商一键登录服务协议》",
                        duration: 1500
                    })
                }

            },
            radioChange(){
                if (this.radioChecked==0){
                    this.radioChecked = 1;
                } else {
                    this.radioChecked = 0;
                }
            },
            //绑定微信获取的手机号
            async directBindingPhone(list){
                let phone = JSON.parse(list);
                this.userPhone = phone.phoneNumber;
                this.loginSuccess = true;
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    phone: phone.phoneNumber
                }
                const res = await this.$api.directBindingPhone(params);
                if (res.data.level == 'success'){
                    setTimeout(this.returnBack,1000);
                }else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message
                    })
                    this.loginSuccess = false;
                }

            },
            //获取用户协议
            async getUserAgreement(){
                const res = await this.$api.getUserAgreement();
                if (res.data.level == 'success'){
                    this.userAgreement = res.data.data.status;
                }
            },
            //返回上一层
            returnBack(){
                uni.navigateBack({
                    delta: 1
                })
            },
            //跳转到用户协议页面
            skipUserAgreement(){
                uni.navigateTo({
                    url:'/pages/login/userAgreement/userAgreement'
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding: 140rpx 70rpx;
    }
    .login-header{
        .login-header-title{
            font-weight: bold;
            font-size: 40rpx;
            padding-bottom: 60rpx;
        }
        .login-header-content{
            padding: 40rpx 0;
            font-size: 34rpx;
            font-weight: ceil(600);
            text-align: center;
        }
    }
    .login-btn-list{
        padding: 20rpx 0;
        button{
            margin-bottom: 40rpx;
            background: #FFFFFF;
            color: #3981FF;
            border: 2rpx solid #3981FF;
            font-size: 34rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-weight: ceil(500);
            text-align: center;
            border-radius: 44rpx;
        }
        .login-btn{
            background: #3981FF;
            color: #FFFFFF;
        }
    }
    .login-footer{
        @include flex();
        flex-direction: row;
        .radio{
            transform: scale(0.7);
        }
        text{
            color: #666666;
            font-size: 24rpx;
            line-height: 33rpx;
            height: 33rpx;
        }
    }
    .login-success{
        @include flex();
        flex-direction: column;
        .login-icon{
            width: 260rpx;
            height: 180rpx;
        }
        .login-content{
            @include flex();
            flex-direction: column;
            padding: 54rpx 0;
            .success-phone{
                height: 56rpx;
                line-height: 56rpx;
                font-size: 40rpx;
                color: #333333;
                font-weight: bold;
                padding-bottom: 30rpx;
            }
            .success-message{
                height: 65rpx;
                line-height: 65rpx;
                font-size: 46rpx;
                color: #333333;
                font-weight: bold;
            }
        }
    }
</style>